<script setup>

import { reactive, toRefs, onMounted } from 'vue'
import api from '@/api'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/modules/user'

const user = useUserStore()
user.loadList()
    
const data = reactive({
    drawer: false,
    formSearch: {
        mId: ''
    },
    tableData: [],
    formData: {
        mId: '',
        pIds: ''
    }
})

const onSubmit = () => {
    return new Promise((resolve, reject) => {
        api.post('api/comp/modelParamList', data.formSearch)
            .then(res => {

                data.tableData = res.d
            
                resolve()
            })
    })
        
}

const submit = () => {
               
    api.post('api/comp/modelParamEdit', data.formData)
        .then(res => {
            if (res.c === 0) {
                ElMessage({
                    message: '修改成功',
                    type: ''
                })
            } else {
                ElMessage({
                    message: res.m,
                    type: 'error'
                })
            }
        })
       
}

const { formSearch, tableData, formData, drawer } = toRefs(data)

</script>

<template>
    <div modelParam="content">
        <page-main>
            <div id="form">
                <div>
                    <el-form :inline="true" :model-param="formSearch" model-param="demo-form-inline" size="mini">
                        <el-form-item label="型号Id">
                            <el-input  v-model="formSearch.mId" style="width: 80px" placeholder="输入mId" />
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-table
                    :data="tableData" :cell-style="rowmodelParam"
                    style="width: 450px;height:350px;font-size: 10px;"
                >
                    <el-table-column
                        fixed
                        prop="id"
                        label="ID"
                        width="80px"
                    />
                    <el-table-column
                        fixed
                        prop="mId"
                        label="型号ID"
                        width="120px"
                    />
                    <el-table-column
                        fixed
                        prop="pId"
                        label="参数ID"
                        width="120px"
                    />
                    <el-table-column
                        fixed
                        prop="pName"
                        label="参数名称"
                        width="120px"
                    />
                </el-table>

                <!-- <el-button type="primary" style="margin-top: 20px;" @click="drawer = true">设备型号操作</el-button> -->

                <!-- <el-drawer
                    v-model="drawer"   
                    title="操作"			
                    direction="rtl"
                    custom-model-param="demo-drawer"
                    size="30%"
                > -->
                <el-card style="margin-top: 40px;">
                    <el-form>
                        <el-form-item label="设备ID">
                            <el-input  v-model="formData.mId" />
                        </el-form-item>

                        <el-form-item label="参数ID">
                            <el-input  v-model="formData.pIds" placeholder="多个以逗号分隔" />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" :loading="loading" @click="submit">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>
                        </el-form-item>
                    </el-form>
                <!-- </el-drawer> -->
                </el-card>
            </div>
        </page-main>
    </div>
</template>

<style>
   
</style>